import { FC, useRef, useState } from "react";
import { useRequest } from "ahooks";
// 导入路由
import { useNavigate } from "react-router-dom";
// 导入样式
import styled from "./styled.module.scss";
import { postSmsSendApi, PostSmsLoginApi } from "../../services/login";

interface Props {}
const Login: FC<Props> = () => {
  // const [loading, setLoading] = useState(false)
  // Button 登录  1-  disabled={loading}   2- 发送异步请求前setLoading(true)  3- 异步请求后setLoading(false)

  const { loading, runAsync } = useRequest(PostSmsLoginApi, {
    manual: true,
  });

  const navigate = useNavigate();
  // state
  let [formData, setFormData] = useState({
    mobile: "15021459079",
    code: "1111",
    type: "login" as LOGIN.SmsSendT,
  });

  // ref
  let codeRef: React.MutableRefObject<null | HTMLButtonElement> = useRef(null);

  // 触发函数
  // 双向绑定输入框
  const getLoginmsg = (e: any) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };
  // 登录按钮
  const loginbtn = async () => {
    console.log(formData);
    if (!formData.mobile || !formData.code) {
      return console.log("输入框不能为空！");
    }
    const { state, msg } = await runAsync(formData);
    if (state !== 200) {
      return console.log(msg);
    } else {
      navigate("/");
    }

    // PostSmsLoginApi(formData).then(res => {
    //     console.log(res);
    //     if(res.state !== 200) {
    //         return alert(res.msg)
    //     } else {
    //         navigate('/')
    //     }

    // })
  };

  // 获取验证码
  const getCode = () => {
    //  console.log(e);
    if (!codeRef.current) {
      return;
    }
    if (!/^1\d{10}$/.test(formData.mobile)) {
      return alert("手机号格式错误");
    }
    // 发送获取验证码请求
    postSmsSendApi(formData).then((res) => {
      console.log(res);

      if (res.state !== 201 || res.state !== 400) {
        return alert(res.msg);
      }
    });
    // 倒计时显示
    codeRef.current.disabled = true;
    let time: number = 10;
    codeRef.current.innerText = `剩余${time}s`;
    --time;
    let setI = setInterval(() => {
      if (time < 1) {
        (codeRef.current as HTMLButtonElement).disabled = false;
        (codeRef.current as HTMLButtonElement).innerText = `获取验证码`;
        clearInterval(setI);
      } else {
        (codeRef.current as HTMLButtonElement).innerText = `剩余${time}s`;
        time -= 1;
      }
    }, 1000);
    console.log(codeRef.current);
  };
  return (
    <div className={styled.login}>
      <div className={styled.image}>
        <img src={require("../../static/login_logo.png")} alt="" />
      </div>
      {/* 获取验证码 */}
      <button onClick={getCode} ref={codeRef}>
        获取验证码
      </button>
      {/* 信息 input */}
      <input
        type="text"
        placeholder="手机号"
        name="mobile"
        value={formData.mobile}
        onChange={getLoginmsg}
      />
      <input
        type="text"
        placeholder="验证码"
        name="code"
        value={formData.code}
        onChange={getLoginmsg}
      />
      {/* 登录按钮 */}
      <button onClick={loginbtn} disabled={loading}>
        登录 {loading && "..."}
      </button>
      <p>收不到验证码</p>
    </div>
  );
};

export default Login;
